
<template>
  <section class="laborCost-table"  :class='{emptyClass:empty}'>

    <div class="export">
      <el-button type='success' @click.stop = 'downLoadExcel'>
        <i class="fa fa-external-link"></i>&nbsp;导出
      </el-button>
    </div>

    <el-table
      :data="tableData"
      max-height="540"
      border
      stripe>
      <el-table-column
        :formatter="formatter"
        v-for='(k,i) in tableCol'
        :prop="k.value"
        :label="k.label"
        align="center"
        :width='k.width'
        label-class-name='label-class'
        >
      </el-table-column>
    </el-table>

      <div class="fenye">
        <el-pagination
            
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.pageNum"
           :page-size="page.pageSize"
          :page-sizes="[10, 50, 100, 200,400]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          >

          </el-pagination>
      </div>

  </section>
</template>

<script>
import Vue from 'vue'
import { Pagination, Message } from 'element-ui'
import tableCol from './tableCol'
import Bus from './bus'
Vue.use(Pagination)
export default {

	data () {
		return {
			tableData: [],
			tableCol: tableCol,
			date: '',
			page: {
				pageNum: 1,
				pageSize: 10,
				total: 0
			},
		}
	},
	mounted () {
		Bus.$on('tableDatas', (data) => this.tableData = data)
		Bus.$on('date', (data) => this.date = data)
		Bus.$on('pageSize', (data) => this.page.total = data)
	},
	computed: {
		empty () {
			return this.tableCol.length
		}
	},
	methods: {
		formatter (row, column, cellValue) {

			if (cellValue || cellValue == 0) {

				const { label } = column

				if (label.endsWith('组织') || label === '所属法人公司' || label === '管控权' || label === '并表权' || label === '所属部门' || label === '员工ID' || label === '员工姓名' || label === '员工类型一级' || label === '员工类型二级' || label === '统计时间' || label === '职务描述' || label === '岗位族群' || label === '子族群' || label === '岗位名称' || label === '职级' || label === '货币') {
					return cellValue
				} else {
					if (cellValue.toString().includes('.') == false) {
						return `${cellValue}.00`
					}
				}
			}
			return cellValue
		},

		handleSizeChange (val) {
			this.page.pageSize = val
			this.getTableData()
		},
		handleCurrentChange (val) {
			this.page.pageNum = val
			this.getTableData()
		},

		getTableData () {

			const params = {
				totaldate: this.date,
				pageNum: this.page.pageNum,
				pageSize: this.page.pageSize,
			}
			this.Axios.Post('/reportLaborcostExecl/queryLaborcostList', params)
				.then((res) => {
					const { datas } = res.data
					this.tableData = datas
					this.page.total = res.data.total
				})
		},


		downLoadExcel () {


			if (!this.date || this.date == 'undefined') {
				this.$nextTick(() => { Message.warning('请先输入日期') })
				return
			}

			const params = {
				totaldate: this.date
			}

			window.location.href = this.Axios.baseURI + '/reportLaborcostExecl/laborcostExport' + '?totaldate=' + params.totaldate + '&token=' + localStorage.getItem('token')
		}
	},


}
</script>
<style scoped lang='less'>
.laborCost-table {
  padding: 0 20px 50px 20px;
}
.export {
  margin: 40px 0 10px 0;
}
.fenye {
  margin: 20px 0 0 -15px;
}
</style>

<style>

.laborCost-table .fenye .el-pagination span {
  line-height: 24px !important;
}

.laborCost-table .fenye .el-pagination__total {
  padding-top: 3px;
}

.laborCost-table .label-class {
  line-height: 65px;
}
</style>